<script setup lang="ts">
import type { Widgets } from '../types'
import PopoverWrapper from './PopoverWrapper.vue'

interface IEmit {
  (e: 'click', v: Widgets): void
}

interface IProps {
  list: Widgets[]
}

defineProps<IProps>()
const emit = defineEmits<IEmit>()
</script>

<template>
  <popover-wrapper>
    <div class="search-condition">
      <div class="title">
        请选择筛选条件
      </div>
      <div class="search-condition-list">
        <div
          v-for="(item, i) in list"
          :key="i"
          class="search-condition-item"
          @click="emit('click', item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
  </popover-wrapper>
</template>

<style scoped lang="less">
.search-condition {
  .title {
    font-size: 12px;
    color: #86909c;
    padding: 12px 8px;
    font-weight: 700;
    border-bottom: 1px solid #f2f3f5;
  }
  &-list {
    padding-top: 8px;
  }
  &-item {
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    color: #1d2129;
    margin-bottom: 4px;
    cursor: pointer;
    &:hover {
      background-color: #f7f8fa;
      border-radius: 4px;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
